<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="讲师搜索">
          <el-input v-model="state.params.keyword" clearable placeholder="请输入讲师账号名、手机号" style="width: 200px" />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="state.params.creater" clearable placeholder="请输入创建人名称" />
        </el-form-item>
        <el-form-item label="失效时间">
          <el-date-picker
            v-model="state.params._dateRange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KToolbar>
        <el-button type="primary" @click="onClickDiscount(0)">创建折扣活动</el-button>
      </KToolbar>
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
        <template #actions="s">
          <div class="center">
            <el-link type="primary" @click="onClickGeneration(s.row)">生成</el-link>
            <el-link type="primary" @click="onClickDiscount(1, s.row)">编辑</el-link>
            <el-link type="danger" @click="onClickDelBtn(s.row)">删除</el-link>
          </div>
        </template>
      </KTable>
    </div>
    <!-- 生成 -->
    <GenerationModal ref="generationModal" />
    <!-- 创建、编辑折扣活动 -->
    <AddEditModal ref="addEditModal" :list="lecturerList" @success="methods.onSearch" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useTableList } from './hooks/use-table';
import { useDel } from '@crud/index';
import { delDiscount, getLecList } from '@/api/crm-agency/kgj/lecturer';
import GenerationModal from './components/generation-modal.vue';
import AddEditModal from './components/add-edit-modal.vue';
import { AuthCode, hasPermission } from '@/modules/auth';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyKgjLecturerDiscountList' });
const { state, tableState, tableEvent, ...methods } = useTableList();
// 折扣活动新增-编辑
const addEditModal = ref();
const onClickDiscount = (mode: number, row?: any) => {
  const AuthCodeMap = {
    0: AuthCode.AGENCY_LECTURER_DISCOUNT_CREATE,
    1: AuthCode.AGENCY_LECTURER_DISCOUNT_UPDATE
  };
  if (hasPermission(AuthCodeMap[mode])) {
    addEditModal.value.show(mode, row);
  }
};
// 生成
const generationModal = ref();
const onClickGeneration = (row: any) => {
  generationModal.value.show(row);
};
// 删除
const { onClickDel } = useDel({
  confirm: { title: '删除', message: '是否要删除该活动?' },
  del: async (data: any) => {
    await delDiscount({ discountId: data.discount_id });
    methods.getList();
  }
});
const onClickDelBtn = (row) => {
  if (hasPermission(AuthCode.AGENCY_LECTURER_DISCOUNT_DEL)) {
    onClickDel(row);
  }
};
/** 获取讲师列表数据 */
let lecturerList = ref<any>([]);
const getLecturerList = async () => {
  const res = await getLecList({ params: { limit: 10000, page: 1 }, data: { extend_type: 1 } });
  const { data } = res;
  lecturerList.value = Object.freeze(data?.items ?? []);
};
onMounted(() => {
  getLecturerList();
});
</script>
<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;

  &.disable {
    color: #86909c;
  }
}

.info-box {
  display: flex;

  .value {
    font-size: 16px;
    font-weight: bold;
  }

  .link_count {
    min-width: 120px;
    margin-right: 10px;
  }
}
</style>
